/*@include  来引用本文件中第一的函数，如：@include clearfix */
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar($back, $item) {
  &::-webkit-scrollbar-track-piece,
  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    background: #{$back};
  }
  &::-webkit-scrollbar {
    width: 4px;
    // height: 12px;
  }
  &::-webkit-scrollbar-thumb {
    background: #{$item};
    border-radius: 2px;
  }
}

@mixin scrollBarX($back,$item) {
  &::-webkit-scrollbar-track-piece ,
  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track{
    background: #{$back};
  }
  &::-webkit-scrollbar {
    // display: inline-block;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #{$item};
    border-radius: 2px;
  }
}

/*页面级别的滚动条*/
@mixin scrollBar2($back, $item) {
  &::-webkit-scrollbar-track-piece,
  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    background: transparent;
    &:hover {
      background: #{$back};
    }
  }
  &::-webkit-scrollbar {
    width: 7px;
    height: 12px;
  }
  &::-webkit-scrollbar-thumb {
    background: #{$item};
    border-radius: 12px;
  }
  &::-webkit-scrollbar-button {
    width: 0;
    height: 0;
  }
}

// 超出字符省略显示
@mixin text-ellipsis($line-type: single) {
  overflow: hidden;
  text-overflow: ellipsis;
  @if $line-type == single {
    white-space: nowrap;
  }
  @if $line-type == multi {
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
  }
}
